<style rel="stylesheet/scss" lang="scss" scoped>
.more-item {
  font-size: 14px;
  color: #333;
  margin-top: 0 !important;
  padding-left: 20px;
  position: relative;
  // top: -40px;
  margin-bottom: 8px !important;
  line-height: 250%;
}
.control-point {
  font-size: 14px;
  .lable-name {
    text-align: right;
    padding-right: 20px;
  }
}
.label-bold {
  font-weight: bold;
}
</style>
<template>
  <div v-if="!loading">
    <custom-card title="基本信息" class="mt-30" v-if="detail.pdsFileModelBaseDto">
      <template id="">
        <el-row style="margin-bottom:0">
          <el-col :span="16">
            <el-col :span="12" v-for="(item,index) in basicInfo" :key="index" v-if="!item.hidden">
              <el-row class="prod-info">
                <el-col :span="8" style="text-align:right;padding-right:10px" class="label-bold">
                  {{item.label}}：
                </el-col>
                <el-col :span="16" v-if="item.name!='barcodeType'&&item.name!='isUnderwriting'&&item.name!='underwritingWay'&&item.name!='standard'&&item.name!='isAntiUv'&&item.name!='environmentalProtectionGrade'">
                  {{detail.pdsFileModelBaseDto[item.name]}} {{item.append}}
                </el-col>
                <el-col :span="16" v-if="(item.name=='barcodeType'||item.name=='underwritingWay'||item.name=='environmentalProtectionGrade')&&detail.pdsFileModelBaseDto[item.name]">
                  {{language=='en'?basicInfo[index].options[detail.pdsFileModelBaseDto[item.name]-1].labelEnUs:basicInfo[index].options[detail.pdsFileModelBaseDto[item.name]-1].labelZhCh}}
                </el-col>
                <el-col :span="16" v-if="item.name=='isUnderwriting'||item.name=='isAntiUv'">
                  {{language=='en'?basicInfo[index].options[detail.pdsFileModelBaseDto[item.name]].labelEnUs:basicInfo[index].options[detail.pdsFileModelBaseDto[item.name]].labelZhCh}}
                </el-col>
                <el-col :span="16" v-if="item.name=='standard'&&detail.pdsFileModelBaseDto.standard==2">
                  {{language=='en'?'UsStandard':'美标'}}
                </el-col>
                <el-col :span="16" v-if="item.name=='standard'&&detail.pdsFileModelBaseDto.standard==1">
                  {{language=='en'?'EnStandard':'欧标'}}
                </el-col>
              </el-row>
            </el-col>
          </el-col>
          <el-col :span="8">
            <el-carousel class="prod-img" :autoplay="pageType!='export'">
              <el-carousel-item v-for="(item,index) in detail.pdsFileModelPbsPicsList" :key="index" >
                <img :src="baseImgUrl+item.url" alt="" class="prod-img">
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
        <div class="more-item">
          <span class="label-bold">认证种类：</span> {{detail.pdsFileModelBaseDto.certValues}}</div>
        <div class="more-item">
          <span class="label-bold">销售区域备注：</span> {{detail.pdsFileModelBaseDto.salesAreaRemark}}</div>
      </template>
    </custom-card>
    <custom-card class="mt-30" title="模组信息">
      <el-collapse v-model="activatedNames">
        <el-collapse-item :title="language=='en'?form.itemNameEn:form.itemNameCn" :name="index" v-for="(form,index) in detail.showModules" :key="index">
          <el-col :span="8" v-for="(item,idx) in form.paramsList" :key="idx">
            <el-row class="prod-info">
              <el-col :span="10" style="text-align:right;padding-right:10px" class="label-bold">
                {{language=='en'?item.paramNameEn:item.paramNameCn}}：
              </el-col>
              <el-col :span="14" v-if="item.paramTypeDv!='range'&&item.paramTypeDv!='radio'">
                {{item.paramValue}}{{item.paramUnitDv}}
              </el-col>
              <el-col :span="14" v-if="item.paramTypeDv=='range'">
                {{item.paramValue}}～{{item.paramMaxValue}}{{item.paramUnitDv}}
              </el-col>
              <el-col :span="14" v-if="item.paramTypeDv=='radio'">
                <span v-if="item.paramValue==1">{{language=='en'?'Y':'是'}}</span>
                <span v-if="item.paramValue==0">{{language=='en'?'N':'否'}}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-collapse-item>
      </el-collapse>
    </custom-card>
    <custom-card title="特征" class="mt-30">
      <el-table :data="detail.showFeaturesList" border style="width: 100%">
        <el-table-column label="序号" min-width="20%" width="120px" align="center">
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="特征" min-width="80%" align="center">
          <template slot-scope="scope">
            {{language=='en'?scope.row.nameEn:scope.row.nameCn}}
          </template>
        </el-table-column>
      </el-table>
    </custom-card>
    <custom-card title="附件" class="mt-30">
      <el-table :data="detail.showAccessoriesList" border style="width: 100%">
        <el-table-column label="附件" min-width="50%" align="center">
          <template slot-scope="scope">
            {{language=='en'?scope.row.nameEn:scope.row.nameCn}}
          </template>
        </el-table-column>
        <el-table-column label="数量" min-width="15%" align="center">
          <template slot-scope="scope">
            {{scope.row.accessoryQuantity}}
          </template>
        </el-table-column>
      </el-table>
    </custom-card>
    <custom-card title="颜色部件" class="mt-30">
      <el-table :data="detail.showColorsList" border style="width: 100%">
        <el-table-column label="部件" min-width="50%" align="center">
          <template slot-scope="scope">
            {{language=='en'?scope.row.nameEn:scope.row.nameCn}}
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="center">
          <template slot-scope="scope">
            {{scope.row.color}}
          </template>
        </el-table-column>
        <el-table-column label="色值" align="center">
          <template slot-scope="scope">
            {{scope.row.colorValue}}
          </template>
        </el-table-column>
      </el-table>
    </custom-card>
    <custom-card title="客户管控点" class="mt-30">
      <el-row class="control-point">
        <el-col :span="4" class="lable-name"> 管控点说明：</el-col>
        <el-col :span="20"> {{detail.pdsFileModelBaseDto.customerControlPoint}}</el-col>
      </el-row>
    </custom-card>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import CustomCard from '@/components/CustomCard/index';
import { modelDetail } from '@/api/sale/model/index';
export default {
  name: 'user',
  components: {
    CustomCard
  },
  data() {
    return {
      pageType: null,
      detail: {
        customerControlPoint: {}
      },
      loading: false,
      baseImgUrl: process.env.BASE_FILE_URL + '/',
      activatedNames: [],
      basicInfo: [
        {
          label: '客户',
          unit: '',
          element: 'selectFilter',
          name: 'customerName',
          type: 'filter',
          isRequired: true
        },
        {
          label: '客户型号',
          unit: '',
          element: 'input',
          name: 'customerModel',
          type: '',
          isRequired: true
        },
        {
          label: '机型全码',
          unit: '',
          element: 'input',
          name: 'plmArticleNo',
          type: '',
          isRequired: true
        },
        {
          label: '机型号',
          unit: '',
          element: 'input',
          name: 'plmModelNo',
          type: '',
          isRequired: true,
          disabled: true
        },
        {
          label: '品牌',
          unit: '',
          element: 'input',
          name: 'brandName',
          type: '',
          isRequired: true
        },
        {
          label: '产品名称',
          unit: '',
          name: 'name',
          element: 'input',
          type: '',
          isRequired: false,
          options: []
        },
        {
          label: '插头类型',
          unit: '',
          element: 'select',
          name: 'plugTypeDvValue',
          dictCode: 'prod_file_plug_type',
          append: '',
          type: '',
          isRequired: true
        },
        {
          label: '电源线材质',
          unit: '',
          element: 'input',
          name: 'powerCableMaterial',
          type: '',
          isRequired: false
        },
        {
          label: '电源线长度',
          unit: '',
          element: 'input',
          name: 'powerCableLength',
          append: 'cm',
          type: 'number',
          isRequired: true
        },
        {
          label: '最新售价',
          unit: '',
          element: 'input',
          name: 'latestSellingPrice',
          type: 'number',
          append: '元',
          isRequired: true
        },
        {
          label: '环保等级',
          unit: '',
          element: 'select',
          name: 'environmentalProtectionGrade',
          append: '元',
          isRequired: true,
          limitNum: 3,
          options: [
            {
              id: 1,
              labelZhCh: '无要求'
            },
            {
              id: 2,
              labelZhCh: 'ROHS（R）'
            },
            {
              id: 3,
              labelZhCh: 'PAHS（PR）'
            },
            {
              id: 4,
              labelZhCh: 'REACH（PPR）'
            },
            {
              id: 5,
              labelZhCh: '加州（65）'
            },
            {
              id: 6,
              labelZhCh: 'ALDI 要求'
            }
          ]
        },
        {
          label: '是否抗UV',
          unit: '',
          element: 'radio',
          append: '',
          name: 'isAntiUv',
          type: '',
          options: [
            {
              labelZhCh: '否',
              labelEnUs: 'N',
              value: 0,
              id: 0
            },
            {
              labelZhCh: '是',
              labelEnUs: 'Y',
              value: 1,
              id: 1
            }
          ],
          defaultValue: 0,
          isRequired: true
        },
        {
          label: '时长要求',
          element: 'input',
          type: 'number',
          append: '小时',
          name: 'timeRequirement',
          hidden: true
        },
        {
          label: '明细',
          element: 'textarea',
          type: '',
          name: 'detailRequirements',
          hidden: true
        },
        {
          label: 'Barcode类型',
          unit: '',
          element: 'radio',
          append: '',
          name: 'barcodeType',
          type: '',
          col: 100,
          options: [
            {
              labelEnUs: 'UPC',
              labelZhCh: 'UPC',
              value: 1
            },
            {
              labelEnUs: 'EAN',
              labelZhCh: 'EAN',
              value: 2
            },
            {
              labelEnUs: 'other',
              labelZhCh: '不用我司',
              value: 3
            }
          ],
          defaultValue: 3,
          isRequired: true
        },
        {
          label: 'barcode',
          element: 'input',
          name: 'barcode'
        },
        {
          label: '是否包销',
          unit: '',
          element: 'radio',
          type: '',
          name: 'isUnderwriting',
          defaultValue: 1,
          options: [
            {
              labelZhCh: '否',
              labelEnUs: 'N',
              value: 0,
              id: 0
            },
            {
              labelZhCh: '是',
              labelEnUs: 'Y',
              value: 1,
              id: 1
            }
          ],
          col: 100,
          isRequired: true
        },
        {
          label: '包销方式',
          unit: '',
          element: 'radio',
          type: '',
          name: 'underwritingWay',
          options: [
            {
              labelZhCh: '整机',
              labelEnUs: '整机',
              value: 1,
              id: 1
            },
            {
              labelZhCh: '部件',
              labelEnUs: '部件',
              value: 2,
              id: 2
            },
            {
              labelZhCh: '技术',
              labelEnUs: '技术',
              value: 3,
              id: 3
            }
          ],
          col: 100,
          defaultValue: 1,
          isRequired: true
        },
        {
          label: '市场',
          unit: '',
          element: 'input',
          name: 'underwritingMarket',
          type: '',
          isRequired: true
        },
        {
          label: '国别',
          unit: '',
          element: 'input',
          name: 'underwritingCountry',
          type: '',
          isRequired: true
        },
        {
          label: '标准',
          name: 'standard'
        }
      ]
    };
  },
  computed: {
    ...mapGetters(['elements', 'language'])
  },
  created() {
    this.pageType = this.$route.query.type
    this.getModelDetail();
  },
  activated() {
    this.pageType = this.$route.query.type
    this.getModelDetail();
  },
  methods: {
    getModelDetail() {
      this.loading = true
      modelDetail({
        articlePcsId: this.$route.query.modelPbsId
      }).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.basicInfo.map((row, index) => {
            if (
              res.data.pdsFileModelBaseDto.barcodeType === 3 &&
              row.name === 'barcode'
            ) {
              row.hidden = true;
            }
            if (res.data.pdsFileModelBaseDto.isUnderwriting === 0) {
              if (
                row.name === 'underwritingWay' ||
                row.name === 'underwritingMarket' ||
                row.name === 'underwritingCountry'
              ) {
                row.hidden = true;
              }
            }
            if (res.data.pdsFileModelBaseDto.isAntiUv === 0) {
              if (
                row.name === 'timeRequirement' ||
                row.name === 'detailRequirements'
              ) {
                row.hidden = true;
              }
            }
          });
          this.$set(this, 'detail', res.data);
        }
        res.data.showModules.map((item, index) => {
          this.activatedNames.push(index);
        });
      });
    }
  }
};
</script>
